<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="counter">

        <!-- 传递参数组件 -->
        <ol>
            <todo-item v-for="item in todos" v-bind:todo="item" v-bind:key="item.id">
            </todo-item>
        </ol>

        <!-- 普通组件 -->
        <!-- <ol>
        </ol> -->

        <!-- 元素显示 -->
        <span v-bind:title="message">
            Counter: {{ counter }}
        </span>

        <!-- 绑定按钮 -->
        <button v-on:click="reverseMessage">+ 100</button>
        <hr> <!-- 换行 -->
        <p>{{ message }}</p>

        <!-- v-model 双向绑定-->
        <input v-model="formData.userName" /><br>
        <input v-model="formData.password" /><br>
        <button v-on:click="saveData">提交</button><br>

        <!-- if -->
        <div id="conditional-rendering">
            <span v-if="seen">现在你看到我了</span>
        </div>
        <!--<button v-on:click="seen = change()">hide seen</button>-->
        <button v-on:click="seen = !seen">hide seen</button>

        <!-- for -->
        <!-- 输出自带序号
            1.Learn JavaScript
            2.Learn Vue
            3.Build something awesome
        -->
        <ol>
            <li v-for="todo in todos">
                {{ todo.id }}
            </li>
        </ol>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 定义一个组件
        const TodoItem = {
            props: ['todo'],
            template: `<li>{{ todo.text }}</li>`
        }

        const Counter = {
            // 加载组件
            components: {
                TodoItem
            },
            // v-bind: 绑定属性
            // v-on: 绑定方法
            data() {
                return {
                    counter: 0,
                    message: "test",
                    formData: {
                        userName: "",
                        password: "",
                    },
                    seen: true,
                    todos: [ // 这样声明数组
                        { text: 'Learn JavaScript' },
                        { text: 'Learn Vue' },
                        { text: 'Build something awesome' }
                    ]
                }
            },
            // 在浏览器的dom方法执行完之后 执行 每隔一秒加1
            mounted() {
                setInterval(() => {
                    this.counter++
                }, 1000)
            },
            // 通用的方法
            methods: {
                reverseMessage() { // 方法之一
                    this.counter += 100
                },
                saveData() {
                    console.log(this.formData) // 输出至屏幕
                },
                change() {
                    if (this.seen) {
                        return false
                    } else {
                        return true
                    }
                }
            }

        }

        Vue.createApp(Counter).mount('#counter') // 同12行
    </script>
</body>

</html>